<template>
<div>
    <el-table
            ref="table"
            border
            size="mini"
            :data="localData"
            v-loading="localLoading"
            :empty-text="emptyText"
            @current-change="handleCurrentChange"
            @selection-change="handleSelectionChange"
            v-bind="originTableProp"
            :header-cell-class-name="originTableProp.headerCellClassName ? originTableProp.headerCellClassName:'st-el-table-header-cell'"

    >
        <slot name="prepend"></slot>
        <template v-for="(column,index) in computedOptions">
            <StElTableColumn :emptyCellValue="emptyCellValue" v-bind="column" :key="index">
                <template #[column.sslot]="scope">
                    <slot :name="column.sslot"   v-bind:row="scope.row" v-bind:column="scope.column" v-bind:$index="scope.$index"></slot>
                </template>
            </StElTableColumn>
        </template>
        <slot name="append"></slot>
    </el-table>
    <StElPagination
            v-if="pagination.showPage"
            :current="pagination.current"
            :page-size="pagination.size"
            :total="pagination.total"
            v-on:sizeChange="pageSizeChange"
            v-on:currentChange="pageNoChange"
    ></StElPagination>
</div>
</template>

<script>

    export default {
        name: "StElTable",
        components:{
        },
        provide (){
            return {
                tableOptions: this.options
            }
        },
        props: {
            emptyCellValue: {
                default: ''
            },
            // 表格的原始属性
            originTableProp: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            // 列定义
            /*
            columns 说明
            {
                prop:'',// 属性名
                label:'',// 表头名
                width:'',// 宽度
                stype:'',// 自定义类型，image | txt
                showInDetail:false,// 是否在详情中展示，true详情中展示,false列表中展示
            }
             */
            options: {
                type: Array,
                required: true
            },
            // 表格数据
            // 如果是一个字符串则表示是一个url
            // 如果是一个数据组，则表示是数据本身
            // 如果是一个对象，则表示是分页的数据，分页对象格式固定
            datas:{
                type: [Array, String],
                default: function () {
                    return []
                }
            },
            // 主键属性
            keyProp:{
                type: String,
                default: 'id'
            },
            // data为url有效
            queryParams:{
                type:Object,
                default: function () {
                    return {}
                }
            },
            // 表格数据加载loading状态
            loading: {
                type: Boolean,
                default: false
            },
            // 表格无数据时提示
            emptyText:{
                type: String,
                default: '暂无数据'
            },
            // 唯一标识一条数据的一个文本或属性，主要用来做确定提示用
            uniqueLabel:{
                type: [String,Function]
            },
            // 表格数据多选的默认选中值
            checkedKeys:{
                type: [Array,String],
                default: function () {
                    return []
                }
            },
        },
        computed:{
            computedOptions(){
                return this.options.filter(item=>item.showInDetail !== true)
            }
        },
        created(){
            this.initData(this.datas,this.queryParams)
        },
        mounted(){

        },
        data() {
            return {
                localData: [],
                // 表格数据加载loading状态
                localLoading: this.loading,
                // 分页
                pagination:{
                    showPage: false,//是否显示分页组件
                    current:1,
                    size:10,
                    total: 0
                },
                // 当前选中的行
                selectedRow: null
            }
        },
        methods:{
            // 初始化数据
            initData(data, queryParams){
                if(data == null){
                    this.localData = []
                    this.pagination.showPage = false
                }
                // 如果是字符串，直接请求
                else if(typeof data == 'string'){
                    this.initDataByUrl(data, queryParams)
                }
                // 如果是数组 直接渲染
                else if(this.$stArrayTools.isArray(data)){
                    this.localData = data
                    this.pagination.showPage = false
                }
                // 如果是对象 当做分页对象处理
                else if (this.$stObjectTools.isObject(data)){
                    this.localData = data.records
                    this.pagination.total = data.total
                    this.pagination.current = data.current
                    this.pagination.size = data.size
                    this.pagination.showPage = true
                }
            },
            // 根据url加载数据
            initDataByUrl(url,queryParams) {
                if(this.localLoading){
                    this.$message.info('数据加载中请耐心等待')
                    return
                }
                this.localLoading = true
                this.axios.get(url,{params: queryParams}).then(res => {
                    this.initData(res.data)
                }).catch(error => {
                    this.initData([])
                    if (error.response) {
                        if (error.response.status == 401) {
                            return
                        }
                        if (error.response.data && error.response.data.errorMsg) {
                            if (error.response.status != 404) {
                                this.$message.error(error.response.data.errorMsg)
                            }
                        }

                    } else {
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(() => {
                    this.localLoading = false
                })
            },
            // 每面大小改变重新查询数据
            pageSizeChange (val) {
                this.pagination.size = val
                this.$emit('sizeChange', val)
                this.handlePageChange()
            },
            // 页码改变加载对应页码数据
            pageNoChange (val) {
                this.pagination.current = val
                this.$emit('currentChange', val)
                this.handlePageChange()
            },
            // 改变页码处理
            handlePageChange(){
                // 如果是url处理下一页逻辑
                if(typeof this.datas == 'string'){
                    let page = {
                        current: this.pagination.current,
                        size:this.pagination.size
                    }
                    this.initDataByUrl(this.datas,this.$stObjectTools.extend({},page,this.queryParams))
                }
            },
            // 表格单选
            handleCurrentChange(val) {
                this.selectedRow = val
                this.$emit('currentChange',val)
            },
            // 表格多选
            handleSelectionChange(val) {
                this.selectedRow = val
                this.$emit('selectionChange',val)
            },
            getTableData() {
                return this.localData
            },

            reloadData() {
                this.initData(this.datas,this.queryParams)
            }
        },
        watch:{
            datas(val){
                this.initData(val,this.queryParams)
            },
            queryParams:{
                handler(val) {
                    this.initData(this.datas,val)
                },
                deep: true
            },
            loading(val) {
                this.localLoading = val
            },
            localLoading(val) {
                this.$emit('loading',val)
            }
        }
    }
</script>

<style scoped>
</style>
<style>
/* 默认表格表头背景 样式*/
.el-table__header .st-el-table-header-cell{
  background:#f5f7fa !important;
}
</style>